var html = '<div id="bot-controls"><button id="bot-run" type="button">Start/Stop</button><button type="button" id="bot-go-tradeskill">Go Tradeskill</button></div>';

$(html).appendTo('body');

$('#bot-run').click(function() {
	app.Bot.active ? app.Bot.stop() : app.Bot.start();
});

$('#bot-go-tradeskill').click(function() {
	app.Bot.globalAction = app.ACTION_TRADESKILL;
});

var botStats = '<div id="bot-stats"></div>';
var statMap = [{
		name : 'Main stats',
		values : {
			levels : 'Levels',
			win : 'Win',
			loose : 'Loose',
			quests : 'Quests',
			dungeons : 'Dungeons',
			towers : 'Towers'
		}
	},
	{
		name : 'Stats',
		values : {
			health : 'Health',
			attack : 'Attack',
			defence : 'Defence',
			accuracy : 'Accuracy',
			evasion : 'Evasion',
			luck : 'Luck'
		}
	},
	{
		name : 'Main loot',
		values : {
			gold : 'Gold',
			platinum : 'Platinum',
			shards : 'Shards',
			diamonds : 'Diamonds',
			credits : 'Credits'
		}
	}, {
		id : 'minor',
		name : 'Minor runes',
		values : {
			gray : 'Common',
			green : 'Uncommon',
			blue : 'Blue',
			yellow : 'Yellow',
			purple : 'Purple',
			red : 'Red'
		}
	}, {
		id : 'major',
		name : 'Major runes',
		values : {
			gray : 'Common',
			green : 'Uncommon',
			blue : 'Blue',
			yellow : 'Yellow',
			purple : 'Purple',
			red : 'Red'
		}
	}, {
		id : 'ancient',
		name : 'Ancient runes',
		values : {
			gray : 'Common',
			green : 'Uncommon',
			blue : 'Blue',
			yellow : 'Yellow',
			purple : 'Purple',
			red : 'Red'
		}
	}, {
		name : 'Keys',
		values : {
			green : 'Green',
			blue : 'Blue',
			yellow : 'Yellow',
			purple : 'Purple',
			red : 'Red'
		}
	}];

var $stats = $(botStats).appendTo('body');

for (var i = 0; i < statMap.length; i++) {
	$('<h4></h4>').text(statMap[i].name).appendTo($stats).click(function() {
		$(this).next().toggle();
	});
	
	var $statsList = $('<dl></dl>').appendTo($stats);
	
	for (var key in statMap[i].values) {
		$('<dt>' + statMap[i].values[key] + '</dt><dd id="bot-stat-' + (statMap[i].id || '') + key + '">0</dd>').appendTo($statsList);
	}
}

/**
 * UI class
 */
app.UI = {
	/**
	 * Set new value for the stat
	 *
	 * @param id Stat ID
	 * @param value Value to set
	 */
	setStat : function(id, value) {
		$('#bot-stat-' + id).text(this.format(value));
		
		return this;
	},
	
	/**
	 * Format value
	 * Format numeric values, adding a separator
	 *
	 * @param value Value to format
	 *
	 * @return Formatted value
	 */
	format : function(value) {
		value = value.toString().replace(/(\d{1,3}(?=(\d{3})+(?:\.\d|\b)))/g, '\$1,');
	
		return value;
	}
};
